<template>
  <el-drawer
      v-model="show"
      size="310px"
      title="布局配置"
      direction="rtl"
      class="drawer">
    <el-divider border-style="dashed">布局方式</el-divider>
    <div class="layout-mode-box-style">
      <el-row class="layout-mode-box-style-row" :gutter="10">
        <el-col :span="12">
          <div @click="setLayoutMode('Default')"
               class="layout-mode-style default hand-cursor"
              :class="store.getters.getLayout.layoutMode == 'Default' ? 'active' : ''">
            <div class="layout-mode-style-box">
              <div class="layout-mode-style-aside"></div>
              <div class="layout-mode-style-container-box">
                <div class="layout-mode-style-header"></div>
                <div class="layout-mode-style-container"></div>
              </div>
            </div>
            <div class="layout-mode-style-name">默认</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div @click="setLayoutMode('Classic')"
               class="layout-mode-style classic hand-cursor"
               :class="store.getters.getLayout.layoutMode == 'Classic' ? 'active' : ''">
            <div class="layout-mode-style-box">
              <div class="layout-mode-style-aside"></div>
              <div class="layout-mode-style-container-box">
                <div class="layout-mode-style-header"></div>
                <div class="layout-mode-style-container"></div>
              </div>
            </div>
            <div class="layout-mode-style-name">经典</div>
          </div>
        </el-col>
      </el-row>
<!--      下面两种有点复杂，先不做-->
<!--      <el-row :gutter="10">-->
<!--        <el-col :span="12">-->
<!--          <div @click="setLayoutMode('Streamline')"-->
<!--               class="layout-mode-style streamline hand-cursor"-->
<!--               :class="store.getters.getLayout.layoutMode == 'Streamline' ? 'active' : ''">-->
<!--            <div class="layout-mode-style-box">-->
<!--              <div class="layout-mode-style-container-box">-->
<!--                <div class="layout-mode-style-header"></div>-->
<!--                <div class="layout-mode-style-container"></div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="layout-mode-style-name">单栏</div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <div @click="setLayoutMode('Double')"-->
<!--               class="layout-mode-style double hand-cursor"-->
<!--               :class="store.getters.getLayout.layoutMode == 'Double' ? 'active' : ''">-->
<!--            <div class="layout-mode-style-box">-->
<!--              <div class="layout-mode-style-aside"></div>-->
<!--              <div class="layout-mode-style-container-box">-->
<!--                <div class="layout-mode-style-header"></div>-->
<!--                <div class="layout-mode-style-container"></div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="layout-mode-style-name">双栏</div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
    </div>
<!--    <el-divider border-style="dashed">全局</el-divider>-->
<!--    <el-row class="center-vertical">-->
<!--      <span class="f13 m-r-10">暗黑模式</span>-->
<!--      <el-switch @change="setDark" :model-value="store.getters.getLayout.isDark">-->
<!--        <template #active-action>-->
<!--          <span class="iconfont iaiai-yueliang"></span>-->
<!--        </template>-->
<!--        <template #inactive-action>-->
<!--          <span class="iconfont iaiai-taiyangtianqi"></span>-->
<!--        </template>-->
<!--      </el-switch>-->
<!--    </el-row>-->
    <el-divider border-style="dashed">侧边栏</el-divider>
    <el-row class="center-vertical">
      <span class="f13 m-r-10">显示侧边菜单顶栏(LOGO栏)</span>
      <el-switch @change="setMenuShowTopBar" :model-value="store.getters.getLayout.menuShowTopBar" />
    </el-row>
  </el-drawer>
</template>

<script lang="ts" setup>
import {useStore} from 'vuex'
import {defineExpose, ref} from "vue"

const store = useStore()    //获取store对象
const show = ref(false)

function showComp(){
  show.value = true
}

const setLayoutMode = (mode: string) => {
  store.dispatch('setLayoutMode', mode)
}

const setMenuShowTopBar = (value: boolean) => {
  store.dispatch('setMenuShowTopBar', value)
}

const setDark = (value: boolean) => {
  store.dispatch('setDark', value)
}

defineExpose({
  showComp,
})
</script>

<style lang="scss" scoped>
.drawer :deep(.el-drawer__header) {
  margin-bottom: 0 !important;
}
.layout-mode-box-style-row {
  margin-bottom: 15px;
}
.layout-mode-style {
  position: relative;
  height: 100px;
  border: 1px solid var(--el-border-color-light);
  border-radius: var(--el-border-radius-small);
  &:hover,
  &.active {
    border: 1px solid var(--el-color-primary);
  }
  .layout-mode-style-name {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-color-primary-light-5);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    border: 1px solid var(--el-color-primary-light-3);
  }
  .layout-mode-style-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  &.default {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-aside {
      width: 18%;
      height: 90%;
      background-color: var(--el-border-color-lighter);
    }
    .layout-mode-style-container-box {
      width: 68%;
      height: 90%;
      margin-left: 4%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color-lighter);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 85%;
        background-color: var(--el-border-color-extra-light);
        margin-top: 5%;
      }
    }
  }
  &.classic {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-aside {
      width: 18%;
      height: 100%;
      background-color: var(--el-border-color-lighter);
    }
    .layout-mode-style-container-box {
      width: 82%;
      height: 100%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 90%;
        background-color: var(--el-border-color-extra-light);
      }
    }
  }
  &.streamline {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-container-box {
      width: 100%;
      height: 100%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 90%;
        background-color: var(--el-border-color-extra-light);
      }
    }
  }
  &.double {
    display: flex;
    align-items: center;
    justify-content: center;
    .layout-mode-style-aside {
      width: 18%;
      height: 100%;
      background-color: var(--el-border-color);
    }
    .layout-mode-style-container-box {
      width: 82%;
      height: 100%;
      .layout-mode-style-header {
        width: 100%;
        height: 10%;
        background-color: var(--el-border-color);
      }
      .layout-mode-style-container {
        width: 100%;
        height: 90%;
        background-color: var(--el-border-color-extra-light);
      }
    }
  }
}
</style>
